<template>
	<view class="tools_conf">
		<!-- 显示当前时间 -->
		<view class="time_item">
			{{ nowTime }}
		</view>
		<!-- 工具库汇总 -->
		<view class="tools_list">
			<view v-for="(item,index) in toolsArr" :key="item.id" class="tools_item" @click="jumpToTool(item.id)">
				<img v-if="item.img" img :src="item.img" alt="" srcset="" />
				<text>{{item.name}}</text>
			</view>
		</view>
	</view>
</template>

<script>
import uniNavBar from '../../comonents/uni-nav-bar/uni-nav-bar.vue';
import dayjs from 'dayjs'

const URL_MAP = {
	"01": '/pages/tools/bluetooth',
	"02": '/pages/tools/robot'
}

export default {
	components: {
		uniNavBar
	},
	data(){
		return {
			nowTime: '',
			timer: null,
			toolsArr: [
				{name: '蓝牙搜索', id: '01', img: "/static/image/tools/bluetooth.png"},
				{name: 'AI机器人', id: '02', img: "/static/image/tools/robot.png"}
			]
		}
	},
	onLoad() {
		this.timer = setInterval(() => {
			this.animate()
		}, 500)
	},
	destroyed() {
		clearInterval(this.timer)
		this.timer = null
	},
	methods: {
		animate(){
			this.nowTime = dayjs().format('YYYY-MM-DD HH:mm:ss');
		},
		jumpToTool(id) {
			uni.navigateTo({
				url: URL_MAP[id]
			})
		}
	}
}
</script>

<style lang="scss">
	.tools_conf {
		background-color: #fff;
		height: 100vh;
	}
	.time_item{
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
		font-size: 16px;
		color: #548bf6;
	}
	.tools_list{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		.tools_item{
			width: 50vw;
			height: 200rpx;
			background-color: #fff;
			border: 2rpx solid #eeeeee;
			border-top: none;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;
			img{
				margin-top: 15px;
				width: 40px;
				height: 40px;
			}
			text{
				margin-top: 10px;
			}
		}
	}
</style>